<script lang="ts">
// 假期
export default {
  name: "holidayPage"
};
</script>
<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from "vue";
import {
  addVacation,
  updateVacationByDate,
  queryVacationRecessByMonth
} from "/@/api/basic/vacation";
import { dateFormatYMD, dateFormatYM } from "/@/utils/date";
import { successMessage, errorMessage } from "/@/utils/message";
import { ElForm } from "element-plus";
import { useRoute } from "vue-router";
// const calendar = ref({} as VxeFormInstance);
const route = useRoute();
const routeName = route.name as string;
const page = reactive({
  pageNum: 1,
  pageRow: 30,
  totalResult: 0
});

const table = reactive({
  loading: false,
  tableData: [] as any[],
  listQuery: {
    date: "",
    legalHoliday: "",
    isBeLeave: ""
  },
  calendar: 0,
  date: "",
  calendarValue: new Date() as any
});

// 查询
const searchEvent = (value = table.calendarValue) => {
  table.loading = true;
  var date = dateFormatYM(value);
  table.date = date.split("-")[0] + "年" + date.split("-")[1] + "月";
  var dateYM = date.split("-")[0] + "-" + date.split("-")[1];
  queryVacationRecessByMonth(dateYM)
    .then((res: any) => {
      if (res.code === 0) {
        table.tableData = res.data;
        page.totalResult = res.data.total;
        table.calendarValue.isSelected = true;
      }
      table.loading = false;
    })
    .catch((err: any) => {
      errorMessage("查询失败");
      table.loading = false;
    });
};
const calendar = ref();
const selectDate = (val: string) => {
  calendar.value.selectDate(val);
  searchEvent();
};

const timeMsg = ref<InstanceType<typeof ElForm>>();
const dialog = reactive({
  loading: false,
  type: "",
  submitLoading: false,
  selectRow: null,
  showEdit: false,
  tableData: [] as any[],
  typeData: [] as any[],
  disabledDate: function (time) {
    return time.getTime() - 8.64e7 < Date.now();
  },
  formLabelWidth: "120px",
  date: "",
  timeMsg: {
    date: "",
    id: 0,
    isBeLeave: 0,
    legalHoliday: "",
    remark: "",
    endDate: "",
    startDate: ""
  },
  formRules: {}
});

// 新增
const insertEvent = v => {
  var arr = table.tableData.filter(item => item.ddate == v.day)[0];
  dialog.type = "单选";
  if (arr) {
    Object.keys(dialog.timeMsg).forEach(key => {
      dialog.timeMsg[key] = arr[key] ? arr[key] : dialog.timeMsg[key];
    });
  }
  dialog.timeMsg.date = v.day;
  dialog.selectRow = null;
  dialog.showEdit = true;
};

// 表单提交
const submitEvent = () => {
  timeMsg.value.validate(valid => {
    if (valid) {
      dialog.submitLoading = true;
      if (dialog.type == "批量") {
        dialog.submitLoading = true;
        const timeMsg: any = {};
        Object.assign(timeMsg, dialog.timeMsg);
        timeMsg.startDate = dateFormatYMD(dialog.date[0]);
        timeMsg.endDate = dateFormatYMD(dialog.date[1]);
        addVacation(timeMsg)
          .then((res: any) => {
            if (res.code === 0) {
              successMessage("操作成功");
              handleClose();
              searchEvent();
            } else {
              errorMessage(res.message);
              dialog.submitLoading = false;
            }
          })
          .catch(() => {
            errorMessage("操作失败");
            dialog.submitLoading = false;
          });
      } else {
        // 通过日期添加  updateVacationByDate
        updateVacationByDate(dialog.timeMsg)
          .then((res: any) => {
            if (res.code == 0) {
              successMessage("操作成功");
              handleClose();
              searchEvent();
            } else {
              errorMessage(res.message);
              dialog.submitLoading = false;
            }
          })
          .catch(() => {
            errorMessage("操作失败");
            dialog.submitLoading = false;
          });
      }
    }
  });
};
const batchEvent = () => {
  dialog.type = "批量";
  dialog.showEdit = true;
};
const handleClose = () => {
  nextTick(() => {
    dialog.timeMsg = {
      date: "",
      id: 0,
      isBeLeave: 0,
      legalHoliday: "",
      remark: "",
      endDate: "",
      startDate: ""
    };
    dialog.date = "";
    timeMsg.value.resetFields();
    dialog.submitLoading = false;
    dialog.showEdit = false;
  });
};
// mounted
onMounted(() => {
  nextTick(() => {
    // 将表格和工具栏进行关联
    selectDate("today");
  });
});
</script>

<template>
  <div>
    <!-- 工具栏 -->
    <vxe-form :data="table.listQuery">
      <vxe-form-item>
        <template #default>
          <vxe-button
            icon="fa fa-clone"
            v-auth="routeName + ':volume'"
            @click="batchEvent"
            status="primary"
            >批量设置</vxe-button
          >
        </template>
      </vxe-form-item>
    </vxe-form>
    <!-- 列表 -->
    <el-calendar v-model="table.calendarValue" ref="calendar">
      <template #header>
        <span>{{ table.date }}</span>
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-month')"
            >上个月</el-button
          >
          <el-button size="small" @click="selectDate('today')">今天</el-button>
          <el-button size="small" @click="selectDate('next-month')"
            >下个月</el-button
          >
        </el-button-group>
      </template>
      <template #dateCell="{ data }">
        <div
          style="padding: 10px 12px"
          :class="data.isSelected ? 'is-selected' : ''"
          class="temp"
          @click="searchEvent(data.date)"
        >
          <p @click.prevent="insertEvent(data)">
            {{ data.day.split("-").slice(1).join("-") }}
          </p>
          <div
            v-for="item in table.tableData"
            :key="item.id"
            @click.prevent="insertEvent(data)"
          >
            <p
              style="color: #67c23a; font-size: 14px"
              v-if="item.isBeLeave == 1 && item.ddate == data.day"
            >
              休
            </p>
            <p
              style="font-size: 14px"
              v-if="item.isBeLeave == 1 && item.ddate == data.day"
            >
              {{ item.legalHoliday }}
            </p>
          </div>
        </div>
      </template>
    </el-calendar>

    <!-- 表单弹框 -->
    <el-dialog
      v-model="dialog.showEdit"
      title="更改假期&保存"
      width="500px"
      top="7vh"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="timeMsg"
        id="timeMsg"
        :model="dialog.timeMsg"
        :rules="dialog.formRules"
        :label-width="dialog.formLabelWidth"
      >
        <el-form-item prop="date" label="放假日期">
          <el-date-picker
            v-if="dialog.type == '批量'"
            v-model="dialog.date"
            type="daterange"
            range-separator="至"
            size="small"
            style="width: 100%"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            :rules="[
              { required: true, message: '请选择时间', trigger: 'blur' }
            ]"
          ></el-date-picker>
          <el-input
            v-else
            v-model="dialog.timeMsg.date"
            readonly
            size="small"
            style="width: 100%"
            placeholder="放假日期"
          ></el-input>
        </el-form-item>
        <el-form-item prop="legalHoliday" label="节假日名称">
          <el-input
            v-model="dialog.timeMsg.legalHoliday"
            size="small"
            style="width: 100%"
            placeholder="请输入节假日名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="isBeLeave" label="是否放假">
          <el-radio-group v-model="dialog.timeMsg.isBeLeave">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" size="small">取 消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="submitEvent"
            :disabled="dialog.submitLoading"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style>
.keyword-lighten {
  color: #000;
  background-color: #ffff00;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

// .vxe-button.type--button:not(.is--round) {
//   border-radius: 0;
// }

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}
.is-selected {
  color: #1989fa;
}
.text-model {
  &:hover {
    cursor: pointer;
  }
}
:deep(.vxe-modal--wrapper.type--modal .vxe-modal--body),
:deep(.vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content) {
  overflow: inherit;
}
#timeMsg .el-date-editor.el-input__inner,
#timeMsg .el-form-item :deep(.el-date-editor),
#timeMsg .el-select,
#timeMsg .el-range-editor {
  width: 100% !important;
}
:deep(.el-calendar-table .el-calendar-day) {
  padding: 0;
}
.el-calendar-day > div {
  height: 100%;
}
// :deep(.el-calendar-table__row td.next) {
//   display: none;
// }
// :deep(.el-calendar-table__row td.prev) {
//   visibility: hidden;
// }
</style>
